<template>
	<view class="member-center">
		<view class="member-card">
			<view class="member-title-container">
				<text class="member-title">我的会员</text>
			</view>
			<view class="member-expiry-container" v-if="userInfo.expiryDate">
				<text class="member-expiry">会员到期时间：{{ formatDate(userInfo.expiryDate) }}</text>
			</view>
			<view class="member-expiry-container" v-if="userInfo.initialFeePaid == 0">
				<text class="member-expiry">暂未开通</text>
			</view>
		</view>
		<view class="member-benefits">
			<text class="benefits-title">会员特权</text>
			<view class="benefits-list">
				<view class="benefit-item" v-for="(item, index) in benefits" :key="index">
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		<button class="member-button" @click="createOrder">{{userInfo.initialFeePaid == 0 ? '首次开通' : '立即开通' }}</button>
	</view>
</template>

<script>
	import {
		getUserDetail
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		paymentOrder,
		xcxPay,
		cancelPayment
	} from "@/api/payment.js";
	export default {
		data() {
			return {
				disabled: false,
				userInfo: {},
				benefits: ['VIN免费查询', '免广告', '天气预报', '短信通知', '一键加速', '风险提示', '云上传', '24h客服']
			};
		},
		computed: mapGetters(['isLogin', 'uid', 'userType']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getUserDetail();
					}
				},
				deep: true
			}
		},
		onLoad() {
			console.log("进入会员")
			if (this.isLogin) {
				this.getUserDetail();
			} else {
				toLogin();
			}
		},
		methods: {
			async createOrder() {
				let that = this;
				let orderId = 0;

				that.disabled = true;
				// #ifdef MP
				uni.showLoading({
					title: '订单支付中'
				});
				orderId = await that.paymentOrder();
				// 微信支付
				that.payment(orderId);
				// #endif
			},
			paymentOrder() {
				let that = this;
				return new Promise((resolve, reject) => {
					paymentOrder({
						userInfoId: that.uid,
						inviteCode: that.userInfo.frontUserPhone
					}).then(res => {
						resolve(res.value);
					}).catch(err => {
						uni.hideLoading();
						that.disabled = false;
						that.$util.Tips({
							title: err
						});
					});
				})
			},
			/**
			 * 支付
			 * @param {Object} orderId
			 */
			payment(paymentId) {
				let that = this;
				xcxPay({
					paymentId: paymentId,
					userInfoId: that.$store.state.app.uid,
				}).then(res => {
					let goPages = '/pages/user/index';
					let jsConfig = res.value.param;
					// #ifdef MP
					uni.requestPayment({
						timeStamp: jsConfig.timeStamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.package,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						success: function(res) {
							uni.hideLoading();
							//修改门店身份
							that.$store.commit('USER_TYPE', 'STORE');
							return that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							}, {
								tab: 5,
								url: goPages
							});
						},
						fail: function(e) {
							console.log("取消支付");
							// 调用后端接口，更新订单状态为待支付
							cancelPayment({
								orderId: paymentId
							}).then(res => {
								// that.$util.Tips({
								// 	title: res.message
								// });
							})
							that.disabled = false;
							uni.hideLoading();
							return that.$util.Tips({
								title: '取消支付'
							}, {
								tab: 5,
								url: goPages
							});
						},
						complete: function(e) {
							uni.hideLoading();
							//关闭当前页面跳转至订单状态
							if (res.errMsg == 'requestPayment:cancel') {
								return that.$util
									.Tips({
										title: '取消支付'
									}, {
										tab: 5,
										url: goPages
									});
							}
						},
					})
					// #endif
				}).catch(err => {
					that.$util.Tips({
						title: err.msg
					});
				})
			},
			formatDate(date) {
				if (!date) return "";
				const expiryDate = new Date(date);
				const currentDate = new Date(); // 获取当前时间
				
				// 将日期转换为 UTC+8
				expiryDate.setHours(expiryDate.getHours() + 8);
				currentDate.setHours(currentDate.getHours() + 8);
				
				if (expiryDate < currentDate) {
				    return expiryDate.toISOString().split('T')[0] + " 已过期";
				} else {
				    return expiryDate.toISOString().split('T')[0] + " 到期";
				}
			},
			/**
			 * 获取用户详情
			 */
			getUserDetail: function() {
				let that = this;
				getUserDetail({
					userInfoId: that.uid
				}).then(res => {
					that.userInfo = res.value;
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.member-center {
		padding: 20px;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		/* 确保内容垂直排列 */
	}

	.member-card {
		background-color: #f9e4c5;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
		margin-bottom: 20px;
		display: flex;
		flex-direction: column;
		/* 确保内容垂直排列 */
		justify-content: space-between;
		/* 上下间距均匀分布 */
		height: 200px;
		/* 设置一个固定高度，可根据需要调整 */
	}

	.member-title-container {
		display: flex;
		align-items: flex-start;
		/* 对齐到顶部 */
	}

	.member-expiry-container {
		display: flex;
		align-items: flex-end;
		/* 对齐到底部 */
	}

	.member-title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.member-expiry {
		font-size: 14px;
		color: #999;
	}

	.member-title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.member-subtitle {
		font-size: 18px;
		color: #666;
	}

	.member-description {
		font-size: 14px;
		color: #999;
		margin: 10px 0;
	}

	.member-button {
		background-color: #8b572a;
		color: white;
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		width: 100%;
		margin-top: 20px;
	}

	.member-button:hover {
		background-color: #7a4b23;
	}

	.member-benefits {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.benefits-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}

	.benefits-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.benefit-item {
		background-color: #f9e4c5;
		padding: 10px;
		border-radius: 5px;
		margin: 5px;
		width: 45%;
		text-align: center;
	}

	.invite-friends {
		background-color: #4a4a4a;
		color: white;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
		margin-bottom: 20px;
	}

	.invite-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.invite-date {
		font-size: 14px;
	}
</style>